<template>
    <div class="fillcontain">
        <head-top>
        </head-top>

        <el-row style="margin-top: 20px;">
            <el-form ref="form" :model="form" label-width="100px">
                <el-col :span="5" :offset="1">
                    <el-form-item label="地区名称:">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-form-item label="地区code:">
                        <el-input v-model="form.cityCode"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5" :offset="1">
                    <el-button type="primary" @click="getCitys">查询</el-button>
                </el-col>
            </el-form>
        </el-row>


        <div class="table_container">

            <el-table
                    :data="tableData"
                    highlight-current-row
                    style="width: 100%">
                <el-table-column
                        property="code"
                        label="地区code"
                        width="220">
                </el-table-column>
                <el-table-column
                        property="name"
                        label="地区名称"
                        width="220">
                </el-table-column>
                <el-table-column
                        property="nameEn"
                        label="地区拼音">
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                        style="margin-top:15px;"
                        background
                        layout="prev, pager, next"
                        :current-page.sync="pagination.current"
                        :page-size.sync="pagination.size"
                        :total="pagination.count"
                        @current-change="handleCurrentChange">
                </el-pagination>
            </div>


        </div>
    </div>
</template>

<script>
	import headTop from '../components/headTop'
	import {getUserList, getUserCount} from '@/api/getData'

	export default {
		data() {
			return {
				tableData: [{
					registe_time: '2016-05-02',
					username: '王小虎',
					city: '上海市普陀区金沙江路 1518 弄'
				}],
				pagination: {
					current: 1,
					size: 3,
					count: 0,
					orderby: ''  //升降序
				},
				dialogFormVisible: false,
				form: {
					name: '',
					cityCode: ''
				}
			}
		},

		components: {
			headTop,
		},
		created() {
			this.initData();
		},
		methods: {
			async initData() {
				try {
					this.getCitys(this.pagination.current);
				} catch (err) {
					console.log('获取数据失败', err);
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.pagination.current = val;

				this.getCitys(this.pagination.current)
			},
			async getCitys(current) {
				this.$axios({
					url: "http://127.0.0.1:9522/city/view/getcity/" + this.pagination.current + "/10",
					method: "get",
                    params: {
						name: this.form.name,
                        code: this.form.cityCode
                    }
				}).then(res => {
					console.log(res)
					this.tableData = res.data.records;
					// 当前页
					this.pagination.current = res.data.current;
					this.pagination.size = res.data.size
					this.pagination.count = res.data.total
				})
			},
			handleEdit(index, row) {
				this.getSelectItemData(row, 'edit')
				this.dialogFormVisible = true;
			},
			getSelectItemData(row, type) {
				console.log(row);
				this.name = row.name;
				this.id = row.id;
				this.cityCode = row.cityCode;
				this.phone = row.phone;
				this.state = row.state;
			},
		},
	}
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
</style>
